(function () {

    // 当页面渲染完毕的时候执行
    document.addEventListener('DOMContentLoaded', function () {
        var searchBtn = document.querySelector('.search-btn')
        var searchText = document.querySelector('.search-btn-text')
        // 创建二级菜单的列表
        var chooseArr = ['商品', "专辑", "艺术家"]
        var chooseDiv;
        searchBtn.addEventListener("click", function (event) {
            event.stopPropagation()

            if (!chooseDiv) {
                console.log(1);
                var div = document.createElement('div')
                div.classList.add('chooseItem')
                chooseArr.forEach(function (item, i) {
                    var chooseItem = document.createElement('div')
                    chooseItem.innerHTML = item
                    div.appendChild(chooseItem)
                })
                searchBtn.appendChild(div)
                chooseDiv = div
                chooseDiv.style.opacity = '0'
                setTimeout(() => {
                    chooseDiv.style.opacity = '1'

                }, 010)
                // 委托事件
                div.addEventListener('click', function (event) {
                    event.stopPropagation()

                    searchText.innerHTML = event.target.innerHTML
                    // this.style.display = 'none';
                    chooseDiv.style.opacity = '0'
                    chooseDiv.addEventListener('transitionend', function () {
                        chooseDiv.style.display = 'none'

                    })

                })
                // 点击其他 地方
                document.documentElement.addEventListener('click', function () {
                    chooseDiv.style.opacity = '0'
                    chooseDiv.addEventListener('transitionend', function () {
                        chooseDiv.style.display = 'none'

                    })
                })
            } else {
                console.log(2);
                chooseDiv.style.display = 'block'
                chooseDiv.style.opacity = '1'

            }
        })

        // 其他地方的二级导航啦
        var shop = document.querySelector('.navList-shop')
        var shopArr = ['游戏','小说','域名','收藏品','音乐','艺术品']
        var shopList;
        // 鼠标移入事件
        shop.addEventListener('mouseenter',function(e){
            // e.stopPropagation()
            // 创建一个div
            var shopDiv = document.createElement('div')
            shopDiv.className = 'shopDiv'
            // 如果没有创建过的话 就创建
           if(!shopList){
            //    循环遍历数组
            shopArr.forEach(function(item,i){
                // 创建每一项的数据
                var shopItem = document.createElement('div')
                shopItem.innerHTML = item
                // 数据给到div
                shopDiv.appendChild(shopItem)
            })
            
            shopList = shopDiv
            console.log(shopList);
            shop.appendChild(shopList)
            // 动画效果 从0到1
            shopDiv.style.opacity = '0'
            setTimeout(() => {
                shopDiv.style.opacity = '1'
            }, 10);
           }else {
            
            
            shopList.style.opacity = '0'

            setTimeout(() => {
                shopList.style.opacity = '1'
                shopList.style.display = 'block'

            }, 100);

           }

            shopList.addEventListener('click',function(e){
                e.stopPropagation()
                e.target.classList.add('active')
            })
           
        })
        shop.addEventListener('mouseleave',function(){
            
            shopList.style.opacity = '1'
            setTimeout(() => {
            shopList.style.opacity = '0'
                
            }, 100);
            shopList.style.display = 'none'

        })

    })
})()